<p>This rule raises an issue when accessing a member (property or method) directly from an await expression using parentheses.</p>
<h2>Why is this an issue?</h2>
<p>When you access a member from an await expression, you must wrap the await in parentheses, creating code like <code>(await
expression).property</code>. This pattern has several problems:</p>
<p><strong>Readability issues</strong>: The nested parentheses make the code harder to scan and understand quickly. Developers need to mentally parse
the parentheses to understand the execution order.</p>
<p><strong>Maintenance complexity</strong>: When the await expression becomes more complex, the parentheses create visual clutter that makes it
difficult to identify what is being awaited versus what is being accessed.</p>
<p><strong>Error-prone patterns</strong>: The parentheses requirement is easy to forget, leading to syntax errors. Even when correct, the pattern is
less intuitive than alternatives.</p>
<p>JavaScript provides cleaner alternatives through destructuring assignment and intermediate variables that make the code more explicit and easier to
follow.</p>
<h3>What is the potential impact?</h3>
<p>This issue primarily affects code readability and maintainability. While it doesn’t cause runtime errors when written correctly, it makes code
harder to understand and review, especially in complex asynchronous workflows. Poor readability can lead to bugs during maintenance and makes
onboarding new team members more difficult.</p>
<h3>How to fix?</h3>
<p>Use destructuring assignment to extract the needed property directly from the awaited value. This eliminates the need for parentheses and makes the
intent clearer.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
const foo = (await import('./foo.js')).default; // Noncompliant
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
const {default: foo} = await import('./foo.js');
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/no-await-expression-member.md">no-await-expression-member</a> </li>
  <li> MDN - Destructuring assignment - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Complete guide to destructuring
  assignment in JavaScript</a> </li>
  <li> MDN - await operator - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await">Documentation for the await
  operator and its usage patterns</a> </li>
</ul>
